<template>
  <div class="app-container" style="display:flex;">
    <div style="width: 60%;">
      <div class="page-header">
        <el-button type="primary" plain icon="el-icon-back" size="small" @click="goBack">返回</el-button>
        <div class="dh-title">{{ dh }}</div>
      </div>
      <div class="filter-container">
        <el-tabs v-model="activeName">
          <el-tab-pane label="文档" name="文档" />
          <el-tab-pane v-if="mdArr && Object.keys(mdArr).length > 0" label="表单" name="表单" />
          <el-tab-pane v-if="this.gzmc != ''" label="公章" name="公章" />
        </el-tabs>
      </div>
      <div class="myTable1" style="padding: 10px 5px">
        <!-- <div v-if="activeName=='TXT'" id="main" ref="chart" style="min-height:800px; width: 100%;" /> -->
        <div v-if="activeName == '文档'">
                <div class="document-image-viewer">
                  <div v-if="form && image_path && image_path.length > 0" class="image-container">
                    <div class="image-navigation">
                      <i class="el-icon-picture-outline"></i>
                      <span>共找到 {{ image_path.length }} 页文档</span>
                      <div class="page-controls">
                        <el-button size="mini" icon="el-icon-arrow-left" circle @click="goPrevPage" :disabled="currentPage <= 1"></el-button>
                        <el-input-number v-model="currentPage" 
                          :min="1" 
                          :max="image_path.length" 
                          size="mini" 
                          style="width: 80px; margin: 0 10px;"
                          @change="pageNumberChanged"></el-input-number>
                        <span class="page-indicator">/ {{ image_path.length }}</span>
                        <el-button size="mini" icon="el-icon-arrow-right" circle @click="goNextPage" :disabled="currentPage >= image_path.length"></el-button>
                      </div>
                    </div>
                    <div class="image-grid">
                      <div v-for="(image, index) in displayedImages" :key="index" class="image-card">
                        <div class="image-card-header">
                          <span class="image-number">第 {{ currentPage }} 页</span>
                          <div class="image-controls">
                            <span v-if="image && image.startsWith('data:image/tiff;base64,')" class="tiff-badge">TIFF</span>
                          </div>
                        </div>
                        <div class="image-card-body" ref="imageCardBody">
                          <img :src="image && image.startsWith('data:image/tiff;base64,') ? displayTiffImage(image) : image" 
                               class="document-image" 
                               :class="{ 'image-cover-mode': imageFitMode === 'cover' }"
                               :alt="`文档图片 ${index + 1}`"
                               @click="openImageViewer(image)">
                          <div v-if="image && image.startsWith('data:image/tiff;base64,')" class="tiff-controls">
                            <el-button type="primary" size="mini" @click="downloadTiffImage(image, `文档${index + 1}.tif`)">
                              下载TIFF文件
                            </el-button>
                          </div>
                        </div>
                        <div class="image-card-footer">
                          <el-button type="text" size="small" icon="el-icon-zoom-in" @click="openImageViewer(image)">放大查看</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-image">
                    <i class="el-icon-document"></i>
                    <p>加载中</p>
                  </div>
                </div>
        </div>

        <div v-if="activeName=='表单'">
          <div class="table-recognition-container" >
            <h3 class="main-title">表格信息</h3>

            <div v-if="mdArr && Object.keys(mdArr).length > 0">
            <div v-for="(tableContent, tableKey, index) in mdArr" :key="tableKey" class="table-section" v-if="isTableContentValid(tableContent)">
              <div class="table-header"  >
                <i class="el-icon-document-copy"></i>
                <span>表格 {{ getValidTableIndex(tableKey) }}</span>
                <div class="table-header-right">
                  <!-- <el-tag size="small" type="info">{{ tableKey }}</el-tag> -->
                </div>
              </div>
              <div class="markdown-content" v-html="convertMarkdownToHtml(tableContent)"></div>
            </div>
            <div v-if="Object.keys(mdArr).filter(key => isTableContentValid(mdArr[key])).length === 0" class="no-table-data">
              <i class="el-icon-document"></i>
              <p>没有有效的表格数据</p>
            </div>
          </div>
          <div v-else class="no-table-data">
            <i class="el-icon-document"></i>
            <p>加载中</p>
          </div>
          </div>
        </div>
        <div v-if="activeName=='公章'">
          <div class="table-recognition-container" >
            <h3 class="main-title">公章信息</h3>
            <div class="seal-info-card">
                 
                    <div class="card-body">
                      <div class="info-item">
                        <div class="info-label">公章名称：</div>
                        <div class="info-value">{{ gzmc || '暂无数据' }}</div>
                      </div>
                      <div class="info-item">
                        <div class="info-label">公章编号：</div>
                        <div class="info-value">{{ gzbh || '暂无数据' }}</div>
                      </div>
                      <div class="info-item">
                        <div class="info-label">公章用途：</div>
                        <div class="info-value">{{ gzyt || '暂无数据' }}</div>
                      </div>
  
                    </div>
                  </div>
  
                  <div class="seal-image-container">
                    <div class="card-header">
                      <i class="el-icon-picture"></i>
                      <span>公章识别结果</span>
                    </div>
                    <div class="seal-image-wrapper">
                      <div v-if="gzmc" class="seal-image">
                        <img :src="gzimg" alt="公章识别图" class="seal-marked-image">
                        <div class="image-footer">
                          <i class="el-icon-info-circle"></i>
                          系统已自动在图像上标注公章位置
                        </div>
                      </div>
                      <div v-else class="no-seal-image">
                        <i class="el-icon-warning-outline"></i>
                        <p>加载中</p>
                      </div>
                    </div>
                  </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 38%; margin-left: 2%; min-height:850px;padding: 10px 10px 0px 10px;" class="myTable1">
   
      <div style=" display: flex; flex-direction: column;">
        <div style="display: flex; align-items: center;margin-top: 5px;">
          <i style="font-size: 12px; color: green" class="el-icon-circle-check" />
          <span style="color: green; margin-left: 5px;font-size: 12px;">扫描件已转换</span>
        </div>




        <div v-if="z_status == 1" style="display: flex; align-items: center; margin-top: 5px;">
          <div style="min-width: 100px">
            <i style="font-size: 12px; color: green" class="el-icon-circle-check" />
            <span style="color: green; margin-left: 5px;font-size: 12px;">著录已审核</span>
          </div>
   
        </div>

        <div v-if="z_status == 0" style="display: flex; align-items: center; margin-top: 5px;">
          <div style="min-width: 100px">
            <i style="font-size: 12px; color: red" class="el-icon-warning-outline" />
            <span style="color: red; margin-left: 5px;font-size: 12px;">著录待审核</span>
          </div>
        </div>
      </div>

      <div class="bixi-group-container-title">
        <div class="bixi-group-container-blue-block" /><label class="groupcontainer-title-F4sp83QczG">著录信息</label><span
          class="bixi-group-container-description" />
        <div style="margin-left: 8px;">
          <el-table :data="tableData" border style="width: 100%; min-height: 100px;" :show-header="false"
            empty-text="加载中">
            <el-table-column prop="zd" label="id" width="100">
              <template slot-scope="{row}">
                <div class="custom-font">
                  {{ row.key }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="value" show-overflow-tooltip label="value">
              <template slot-scope="{row}">
                <div class="custom-font">
                  {{ row.value }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    
    </div>
    
    <!-- 普通图片查看器对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="`查看文档图片 (第 ${currentPage} 页 / 共 ${image_path.length} 页)`"
      width="75%"
      :before-close="closeImageDialog"
      class="image-dialog"
    >
      <div class="image-viewer-content" style="position: relative; min-height: 300px;">
        <div class="keyboard-tips" style="position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; z-index: 100;">
          <div>键盘快捷键：</div>
          <div>+ / - : 放大/缩小</div>
          <div>R / L : 向右/向左旋转</div>
          <div>← / → : 上一页/下一页</div>
          <div>0 : 重置视图</div>
          <div>ESC : 关闭</div>
        </div>
        <img 
          :src="currentImage" 
          :style="{
            transform: `rotate(${imageRotation}deg) scale(${imageScale})`,
            maxWidth: '100%', 
            maxHeight: '70vh', 
            display: 'block', 
            margin: '0 auto',
            transition: 'transform 0.3s ease'
          }"
          alt="文档图片"
        />
      </div>
      <div class="image-controls" style="text-align: center; margin-top: 15px; padding: 10px; background: #f5f7fa; border-radius: 4px;">
        <el-row type="flex" justify="center" align="middle" :gutter="20">
          <el-col :span="12">
            <el-button-group>
              <el-button type="primary" icon="el-icon-zoom-in" @click="zoomImage(0.1)">放大</el-button>
              <el-button type="primary" icon="el-icon-zoom-out" @click="zoomImage(-0.1)">缩小</el-button>
              <el-button type="primary" icon="el-icon-refresh-left" @click="rotateImage(-90)">向左旋转</el-button>
              <el-button type="primary" @click="rotateImage(90)">向右旋转<i class="el-icon-refresh-right el-icon--right"></i></el-button>
              <el-button type="primary" icon="el-icon-refresh" @click="resetImage">重置</el-button>
            </el-button-group>
          </el-col>
          <el-col :span="12">
            <el-button-group>
              <el-button type="primary" icon="el-icon-arrow-left" @click="prevImageInViewer" :disabled="currentPage <= 1">上一页</el-button>
              <el-button type="primary" @click="nextImageInViewer" :disabled="currentPage >= image_path.length">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeImageDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { autoApi } from '@/api/auto'


export default {

  data() {
    return {

      activeName: "文档",


      z_status: null,
      dh: "",
      nodeName: "",
      type: "",
      dhtitleList: [],
      tableData: [],
      tableDatagzsb: [],
      gzmc: "",
      gzbh: "",
      gzyt: "",
      gzimg: "",
      selectedNode: null,
      listLoading: false,
      listQuery: { "name": "" },
      form: {},
      image_path: [],
      currentPage: 1,
      pageSize: 1, // 每页显示1张图片
      mdArr: null,
      imageFitMode: 'contain',
      dialogVisible: false,
      currentImage: '',
      imageRotation: 0,
      imageScale: 1
    }
  },


  async mounted() {
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    console.log(this.type)
    if(this.type == 'gz'){
      this.activeName = '公章'
    }
    if(this.type == 'markdown'){
      this.activeName = '表单'
    }

    this.getgetDetail(this.id)
    // 添加键盘事件监听
  },



  methods: {
    // 显示TIFF图片（转换为可显示格式）
    displayTiffImage(image) {
      // 对于TIFF图片，返回一个预览版本或占位图
      // 实际项目中可能需要使用专门的TIFF渲染库
      return '';
    },
    
    // 下载TIFF图像
    downloadTiffImage(imageData, fileName) {
      // 创建一个链接元素用于下载
      const link = document.createElement('a');
      link.href = imageData;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

    // 上一页
    goPrevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    
    // 下一页
    goNextPage() {
      if (this.currentPage < this.image_path.length) {
        this.currentPage++;
      }
    },

    // Markdown转HTML方法
    convertMarkdownToHtml(markdown) {
      if (!markdown) return '';
      
      // 预处理markdown内容，修复数据错位
      markdown = this.preprocessTableData(markdown);
      
      let html = '';
      const lines = markdown.split('\n');
      
      // 查找表头行和分隔行
      let headerRow = -1;
      let separatorRow = -1;
      
      for (let i = 0; i < lines.length; i++) {
        if (lines[i].trim().startsWith('|') && lines[i].trim().endsWith('|')) {
          if (headerRow === -1) {
            headerRow = i;
          } else if (separatorRow === -1 && lines[i].includes('---')) {
            separatorRow = i;
            break;
          }
        }
      }
      
      // 如果找到表头和分隔行，则开始处理表格
      if (headerRow !== -1 && separatorRow !== -1) {
        html += '<div class="table-wrapper">';
        html += '<table class="md-table">';
        
        // 处理表头
        let headerLine = lines[headerRow].trim();
        let headerCells = headerLine.substring(1, headerLine.length - 1).split('|');
        
        html += '<thead><tr class="table-header-row">';
        headerCells.forEach(cell => {
          const cellText = cell.trim();
          // 添加title属性，这样当鼠标悬停时可以显示完整的表头文字
          html += `<th title="${cellText}">${cellText}</th>`;
        });
        html += '</tr></thead>';
        
        // 处理表格内容
        html += '<tbody>';
        for (let i = separatorRow + 1; i < lines.length; i++) {
          const line = lines[i].trim();
          if (line.startsWith('|') && line.endsWith('|')) {
            const cells = line.substring(1, line.length - 1).split('|');
            
            html += '<tr>';
            cells.forEach(cell => {
              html += `<td>${cell.trim()}</td>`;
            });
            html += '</tr>';
          }
        }
        html += '</tbody>';
        
        html += '</table>';
        html += '</div>';
        
        // 添加分割线，增强视觉区分
        html += '<div class="table-divider"></div>';
      } else {
        // 如果没有找到表格格式，则以普通文本方式显示
        html = '<div class="plain-text">' + markdown.replace(/\n/g, '<br>') + '</div>';
      }
      
      return html;
    },
    
    // 预处理表格数据，修复可能的数据错位
    preprocessTableData(markdown) {
      if (!markdown) return '';
      
      const lines = markdown.split('\n');
      let headerRow = -1;
      let separatorRow = -1;
      
      // 查找表头和分隔行
      for (let i = 0; i < lines.length; i++) {
        if (lines[i].trim().startsWith('|') && lines[i].trim().endsWith('|')) {
          if (headerRow === -1) {
            headerRow = i;
          } else if (separatorRow === -1 && lines[i].includes('---')) {
            separatorRow = i;
            break;
          }
        }
      }
      
      if (headerRow === -1 || separatorRow === -1) return markdown;
      
      // 获取表头
      const headerLine = lines[headerRow].trim();
      const headers = headerLine.substring(1, headerLine.length - 1).split('|').map(h => h.trim());
      
      // 分析数据行
      const resultLines = [...lines.slice(0, separatorRow + 1)];
      
      for (let i = separatorRow + 1; i < lines.length; i++) {
        const line = lines[i].trim();
        if (line.startsWith('|') && line.endsWith('|')) {
          // 直接添加原始行，不进行单元格数量调整
          resultLines.push(line);
        } else {
          resultLines.push(line);
        }
      }
      
      return resultLines.join('\n');
    },

    async getgetDetail(id) {

      let params = {
        id: id,
      }

      const response = await autoApi("getArticleDetailsById", params)

      if (response.code == 200) {

        this.tableData = response.data.list
        this.tableDatagzsb = response.data.gzsblist


        this.dh = response.data.dh
        this.listQuery.name = response.data.dh
        this.is_kag = response.data.is_kag
        this.z_status = response.data.z_status
        this.pdf_url = response.data.pdf_url
        this.contentzrdhh = response.data.contentzrdhh
        this.image_path = response.data.image_path
        this.mdArr = response.data.mdArr
        console.log(this.mdArr)

        this.gzmc = response.data.gzmc
        this.gzbh = response.data.gzbh
        this.gzyt = response.data.gzyt
        this.gzimg = response.data.output_file

      }
    },


    async skip2(id) {
      let url = "/documentfilemana/eid?id=" + id
      window.open(url, '_blank');
    },

    // 恢复所有边的颜色



    
    pageNumberChanged() {
      // 确保页码在有效范围内
      if (this.currentPage < 1) {
        this.currentPage = 1;
      } else if (this.currentPage > this.image_path.length) {
        this.currentPage = this.image_path.length;
      }
    },

    openImageViewer(image) {
      this.currentImage = image;
      this.dialogVisible = true;
      // 重置旋转和缩放状态
      this.imageRotation = 0;
      this.imageScale = 1;
    },

    closeImageDialog() {
      this.dialogVisible = false;
    },

    rotateImage(degrees) {
      this.imageRotation = (this.imageRotation + degrees + 360) % 360;
    },

    zoomImage(scale) {
      this.imageScale = Math.max(0.1, Math.min(2, this.imageScale + scale));
    },

    resetImage() {
      this.imageRotation = 0;
      this.imageScale = 1;
    },

    // 处理键盘快捷键
    handleKeyDown(e) {
      if (this.dialogVisible) {
        switch(e.key) {
          case '+':
          case '=':
            this.zoomImage(0.1);
            e.preventDefault();
            break;
          case '-':
            this.zoomImage(-0.1);
            e.preventDefault();
            break;
          case 'r':
          case 'R':
            this.rotateImage(90);
            e.preventDefault();
            break;
          case 'l':
          case 'L':
            this.rotateImage(-90);
            e.preventDefault();
            break;
          case 'Escape':
            this.closeImageDialog();
            e.preventDefault();
            break;
          case '0':
            this.resetImage();
            e.preventDefault();
            break;
          case 'ArrowLeft':
            if (this.currentPage > 1) {
              this.goPrevPage();
              this.currentImage = this.image_path[this.currentPage - 1];
            }
            e.preventDefault();
            break;
          case 'ArrowRight':
            if (this.currentPage < this.image_path.length) {
              this.goNextPage();
              this.currentImage = this.image_path[this.currentPage - 1];
            }
            e.preventDefault();
            break;
        }
      }
    },

    // 在查看器中查看前一张图
    prevImageInViewer() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.currentImage = this.image_path[this.currentPage - 1];
        // 重置视图
        this.resetImage();
      }
    },
    
    // 在查看器中查看下一张图
    nextImageInViewer() {
      if (this.currentPage < this.image_path.length) {
        this.currentPage++;
        this.currentImage = this.image_path[this.currentPage - 1];
        // 重置视图
        this.resetImage();
      }
    },

    goBack() {
      // 如果是从其他页面打开的，则关闭当前窗口
      if (window.opener) {
        window.close()
      } else {
        // 如果是直接访问的，则返回到列表页
        this.$router.push('/documentfilemana/index')
      }
    },

    isTableContentValid(tableContent) {
      if (!tableContent || tableContent.trim() === '') {
        return false;
      }
      
      // 检查是否只有表头而没有实际数据
      const lines = tableContent.split('\n');
      let headerRow = -1;
      let separatorRow = -1;
      let hasDataRows = false;
      
      // 查找表头、分隔行和数据行
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();
        if (line.startsWith('|') && line.endsWith('|')) {
          if (headerRow === -1) {
            headerRow = i;
          } else if (separatorRow === -1 && line.includes('---')) {
            separatorRow = i;
          } else if (separatorRow !== -1) {
            // 如果找到了分隔行之后的数据行
            hasDataRows = true;
            break;
          }
        }
      }
      
      // 只有当表格有表头、分隔行和至少一行数据时才显示
      return headerRow !== -1 && separatorRow !== -1 && hasDataRows;
    },

    getValidTableIndex(currentKey) {
      // 获取所有有效表格的键
      const validTableKeys = Object.keys(this.mdArr).filter(key => this.isTableContentValid(this.mdArr[key]));
      // 找到当前键在有效表格键列表中的索引位置
      const indexInValidTables = validTableKeys.indexOf(currentKey);
      // 返回索引+1作为表格编号
      return indexInValidTables + 1;
    },
  },
  computed: {
    // 根据分页获取当前页显示的图片
    displayedImages() {
      if (this.pageSize === 1) {
        // 单页模式
        return [this.image_path[this.currentPage - 1]];
      } else {
        // 所有页面模式 (现在不使用，但保留兼容性)
        return this.image_path;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.no-table-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #909399;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.no-table-data i {
  font-size: 64px;
  margin-bottom: 15px;
  color: #DCDFE6;
}

.no-table-data p {
  font-size: 16px;
}


.no-seal-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
  color: #909399;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px dashed #dcdfe6;
}

.no-seal-image i {
  font-size: 64px;
  margin-bottom: 15px;
  color: #DCDFE6;
}

.no-seal-image p {
  font-size: 16px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);

  .el-button {
    margin-right: 15px;
  }

  .dh-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    flex: 1;
  }
}

.seal-image-container {
  margin-top: 20px;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.seal-image-wrapper {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seal-image {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seal-marked-image {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-footer {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #ecf5ff;
  color: #409EFF;
  border-radius: 4px;
  font-size: 13px;
}

.no-seal-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 100%;
  color: #909399;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px dashed #dcdfe6;
}

.no-seal-image i {
  font-size: 64px;
  margin-bottom: 15px;
  color: #DCDFE6;
}

.no-seal-image p {
  font-size: 16px;
}

.info-actions {
  margin-top: 20px;
  text-align: right;
}
.info-item {
  display: flex;
  margin-bottom: 15px;
  padding: 5px 10px;
  border-bottom: 1px dashed #ebeef5;
  align-items: center;
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-label {
  width: 100px;
  font-size: 14px;
  color: #606266;
  font-weight: bold;
  display: flex;
  align-items: center;
  min-height: 32px;
}

.info-value {
  flex: 1;
  font-size: 14px;
  color: #303133;
  display: flex;
  align-items: center;
  min-height: 32px;
}


.card-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
  border-radius: 8px 8px 0 0;
}


.seal-info-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.custom-font {
  color: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  line-height: 1.5715;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: normal !important;
}

.always-underlined {
  text-decoration: underline;
}

::v-deep .el-table__empty-text {
  font-weight: normal !important;
  font-size: 12px;
}

::v-deep .el-table__row {
  height: 30px; /* 设置你想要的行高 */

  td {
    padding: 5px 0;
  }
}

::v-deep .el-link--inner {
  font-size: 12px;
}

html,
body,
.app-container {
  height: 100%; /* 设置 html 和 body 以及 .app-container 的高度为 100% */
  margin: 0; /* 清除默认边距 */
}

.dhtitle {
  margin-top: 5px;
  color: #6ea3fd;
}

.myTable1 {
  background-color: #fff;
  // padding: 40px 20px 0px 20px;
}
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}
.bixi-group-container-title {
  color: #363b45;
  font-size: 12px;
  font-weight: 550;
  margin: -4px 0;
  margin-top: 2px;
}
.bixi-group-container-blue-block {
  background: #4d67be;
  border-radius: 0 4px 4px 0;
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  position: relative;
  top: 1px;
  width: 3px;
}

.groupcontainer-title-F4sp83QczG {
  font-size: 12px;
  font-weight: 600;
}

.bixi-group-container-description {
  color: #b9bbbe;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  margin-left: 8px;
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 设置最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  // width: 200px;
  // border: 1px solid #ccc;
  // padding: 5px;
}

/* 表单样式调整 */
.table-recognition-container {
  padding: 10px;
}

.table-section {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
}

.table-header-right {
  flex-shrink: 0;
}

.table-header i {
  margin-right: 10px;
  color: #409EFF;
}

/* 修改表格条纹样式 */
.md-table tr:nth-child(odd) {
  background-color: #ffffff;
}

.md-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.md-table th {
  background-color: #3a8ee6; /* 更明显的表头颜色 */
  color: white;
  font-weight: 500;
  padding: 12px 10px;
  border: 1px solid #ccc;
}

.md-table td {
  padding: 10px;
  border: 1px solid #e0e0e0;
}

/* 表格内容超出一定高度时添加滚动条 */
.markdown-content {
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 20px;
}

.md-table th {
  background-color: #f5f7fa;
  color: #606266;
  padding: 12px 8px;
  border: 1px solid #ebeef5;
  text-align: left;
  font-weight: bold;
}

.md-table td {
  padding: 12px 8px;
  border: 1px solid #ebeef5;
  color: #606266;
}

.md-table tr:nth-child(even) {
  background-color: #fafafa;
}

.md-table tr:hover {
  background-color: #f0f9ff;
}

.table-pagination {
  margin-top: 15px;
  text-align: right;
}

// 添加文档图片查看相关样式
.document-image-viewer {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
  max-width: 800px;
  margin: 0 auto;
  height: 850px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #dcdfe6 #f2f6fc;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:fullscreen {
    padding: 20px;
    background-color: #fff;
    max-width: none;
    height: 100%;
    
    .image-card {
      max-width: 90%;
      margin: 0 auto;
    }
    
    .image-card-body .document-image {
      min-height: 70vh;
      max-height: 85vh;
    }
  }
  
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    border-radius: 4px;
  }
  
  &::-webkit-scrollbar-track {
    background-color: #f2f6fc;
  }
  
  .image-navigation {
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
    background-color: #f0f0f0;
    padding: 8px;
    border-radius: 4px;
    
    i {
      margin-right: 5px;
      color: #409EFF;
    }
    
    .page-controls {
      margin-top: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .page-indicator {
        margin: 0 10px;
        font-weight: bold;
        min-width: 60px;
        text-align: center;
      }
    }
  }
  
  .image-container {
    width: 100%;
    padding: 8px;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .image-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 2px;
  }
  
  .image-card {
    width: 100%;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
    max-width: 650px;
    position: relative;
    
    &:after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 5%;
      width: 90%;
      height: 8px;
      background: linear-gradient(0deg, transparent, rgba(0,0,0,0.05));
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
    }
    
    .image-card-header {
      padding: 6px 10px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f7f7f7;
      
      .image-number {
        font-weight: 500;
        font-size: 13px;
        color: #606266;
      }
      
      .image-controls {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      .tiff-badge {
        background-color: #67c23a;
        color: white;
        padding: 2px 6px;
        border-radius: 10px;
        font-size: 10px;
      }
    }
    
    .image-card-body {
      padding: 5px;
      background-color: white;
      position: relative;
      
      .document-image {
        width: 100%;
        min-height: 450px;
        max-height: 550px;
        object-fit: contain;
        cursor: pointer;
        background-color: white;
        box-shadow: none;
        transition: transform 0.3s ease, object-fit 0.3s ease;
      }
      
      .image-cover-mode {
        object-fit: cover;
      }
      
      .tiff-controls {
        margin-top: 10px;
        text-align: center;
      }
    }
    
    .image-card-footer {
      padding: 6px;
      border-top: 1px solid #f0f0f0;
      text-align: center;
      background-color: #f7f7f7;
    }
  }
  
  .no-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #909399;
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    
    i {
      font-size: 48px;
      margin-bottom: 10px;
    }
    
    p {
      margin: 0;
      font-size: 14px;
    }
  }
}

.document-image-viewer-dialog {
  .el-message-box__message {
    max-height: 95vh;
    overflow: hidden;
  }

  .el-message-box__content {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .el-message-box {
    width: 90% !important;
    max-width: 1200px !important;
  }

  img {
    transition: transform 0.3s ease, object-fit 0.3s ease !important;
    max-height: 90vh !important;
    transform-origin: center center;
    position: relative;
    z-index: 1;
  }
  
  .el-button [class*="el-icon-"] + span {
    margin-left: 5px;
  }
  
  .el-button--mini {
    padding: 5px;
  }
  
  .el-message-box__header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .el-message-box__title {
    color: #409EFF;
    font-weight: 500;
  }
  
  .el-message-box__headerbtn {
    font-size: 18px;
    z-index: 2001;
  }
  
  .el-message-box__close {
    color: #909399 !important;
    
    &:hover {
      color: #F56C6C !important;
    }
  }
  
  /* 修复放大后按钮可能被挡住的问题 */
  .el-button.is-circle {
    position: relative;
    z-index: 2001;
    margin: 0 2px;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  /* 增强按钮点击反馈 */
  .el-button {
    position: relative;
    z-index: 2001;
    
    &:active {
      transform: scale(0.95);
      transition: transform 0.1s;
    }
    
    &.el-button--primary, &.el-button--success {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      
      &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
      
      &:active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

/* 移动设备适配 */
@media screen and (max-width: 768px) {
  .document-image-viewer {
    height: calc(100vh - 140px);
    max-width: 100%;
    
    .image-card {
      max-width: 100%;
    }
    
    .image-card-body .document-image {
      min-height: 300px;
    }
  }
  
  .document-image-viewer-dialog .el-message-box {
    width: 95% !important;
  }
  
  .fullscreen-image-viewer {
    .image-viewer-toolbar {
      height: 50px;
      padding: 0 10px;
      
      .toolbar-title {
        font-size: 16px;
      }
      
      .toolbar-actions {
        gap: 5px;
        
        .el-button {
          font-size: 16px;
          padding: 6px;
        }
      }
    }
  }
}
</style>

<style lang="scss">
/* 自定义全屏图片查看器样式 */
.fullscreen-image-viewer {
  .el-dialog {
    margin: 0 !important;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
  }
  
  .el-dialog__header {
    display: none;
  }
  
  .el-dialog__body {
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .image-viewer-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    position: relative;
  }
  
  .image-viewer-toolbar {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    
    .toolbar-title {
      font-size: 18px;
      font-weight: 500;
    }
    
    .toolbar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      
      .el-button {
        color: #fff;
        font-size: 18px;
        padding: 8px;
        
        &:hover {
          color: #409EFF;
        }
      }
    }
  }
  
  .image-viewer-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    
    img {
      max-width: 95%;
      max-height: 95%;
      object-fit: contain;
      transition: transform 0.3s ease;
      transform-origin: center center;
      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    }
  }
}

/* 图片查看弹窗的全局样式 */
.document-image-viewer-dialog {
  .el-message-box__message {
    max-height: 95vh;
    overflow: hidden;
  }

  .el-message-box__content {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .el-message-box {
    width: 90% !important;
    max-width: 1200px !important;
  }

  img {
    transition: transform 0.3s ease, object-fit 0.3s ease !important;
    max-height: 90vh !important;
    transform-origin: center center;
    position: relative;
    z-index: 1;
  }
  
  .el-button [class*="el-icon-"] + span {
    margin-left: 5px;
  }
  
  .el-button--mini {
    padding: 5px;
  }
  
  .el-message-box__header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .el-message-box__title {
    color: #409EFF;
    font-weight: 500;
  }
  
  .el-message-box__headerbtn {
    font-size: 18px;
    z-index: 2001;
  }
  
  .el-message-box__close {
    color: #909399 !important;
    
    &:hover {
      color: #F56C6C !important;
    }
  }
  
  /* 修复放大后按钮可能被挡住的问题 */
  .el-button.is-circle {
    position: relative;
    z-index: 2001;
    margin: 0 2px;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  /* 增强按钮点击反馈 */
  .el-button {
    position: relative;
    z-index: 2001;
    
    &:active {
      transform: scale(0.95);
      transition: transform 0.1s;
    }
    
    &.el-button--primary, &.el-button--success {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      
      &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      }
      
      &:active {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

/* 移动设备适配 */
@media screen and (max-width: 768px) {
  .fullscreen-image-viewer {
    .image-viewer-toolbar {
      height: 50px;
      padding: 0 10px;
      
      .toolbar-title {
        font-size: 16px;
      }
      
      .toolbar-actions {
        gap: 5px;
        
        .el-button {
          font-size: 16px;
          padding: 6px;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.main-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
}

.table-wrapper {
  margin-bottom: 15px;
  overflow-x: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.table-divider {
  height: 20px;
  border-top: 2px dashed #e0e0e0;
  margin: 30px 0;
  position: relative;
}

.table-divider:before {
  content: "表格分隔";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #f5f7fa;
  padding: 0 10px;
  color: #909399;
  font-size: 12px;
}
</style>

<style lang="scss" scoped>
.back-button {
  margin-bottom: 15px;
  padding: 0 5px;
}
</style>

